﻿/********* Global variables *********/
        
var chartId; // the chart control Id
var chart; // the chart control object
var language; // user's language
var deploymentYear = 2008; // Year of first deployment

var selectedSelector; // the current selected selector
var isLoading; // tell if the Silverlight control is loading new data for the requested graph
               // used to disable selectors' event handlers

/************************************/


/********* Initialization functions *********/

// When the page is completed loaded...
$(window).load( function()
{
    preloadImages();
    
	// Register event handlers for the scrollers
	$('#scrollRight').click(scrollToRight);
	$('#scrollLeft').click(scrollToLeft);
	
	// :-D
	$('#statsTableSystemIcon').click(function(){
	    window.open("/stats/eeCounter/eeCounter.htm","eeCounter", "menubar=0, toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, width=380,  height=220");
	}); 
	
});

// When the silverligh plugin is loaded...
function onPluginLoaded(sender)
{
    // Get a reference to the Silverlight control
    chart = document.getElementById(chartId).content.page;

    // Set the control language for internationalization
    chart.UserLanguage = language;
    
    // Register an event handler for the graph's OnGraphRefresh event.
	// This event is notified by the Silverlight control when the new data
	// are available after the refresh.
	chart.OnGraphRefresh = function(sender,arg){stopLoading();};
    
    // Register event handlers for selectors and comboboxes
    $('#graphSelectors li').click(graphSelectorClicked);
	$('#graphSelectors li').hover(graphSelectorOver,graphSelectorOut);
	$('#graphMonth').change(monthChanged);
	$('#graphYear').change(yearChanged);
    
    // Get a reference to the selector selected by default...
	selectedSelector = $('#graphSelectors li:first')[0];
	
	// ... and highlight it
	$(selectedSelector).addClass('selectorHighlighting');
	
	// Fill the "graphYear" combobox with every available year
	insertAvailableYears();
	
	// Show the loading icon
	startLoading();
}

/********************************************/


/********* Event handlers *********/

// Highlight the new selected selector and change the graph's type
function graphSelectorClicked(event)
{
	if(selectedSelector != event.target  && !isLoading)
	{
	    // Highlight the new selected selector, ...
		$(selectedSelector).removeClass('selectorHighlighting');
		$(event.target).removeClass('selectorHovering');
		$(event.target).addClass('selectorHighlighting');
		
		// ... update the relative reference, ...
		selectedSelector = event.target;
		
		// ... retrieve the associated "value" attribute
		var graphType = $(event.target).children('input').attr('value');
		
		// and use it to update the "Subject" property of the Silverlight control (to change the graph's type)
		chart.Subject = graphType;
		
		// Finally show the loading icon
	    startLoading();
	}
}


// Highlight the selector under the mouse cursor
function graphSelectorOver(event)
{
	if(selectedSelector != event.target && !isLoading)
		$(event.target).addClass('selectorHovering');
}


// Remove the highlighting to the selector when the mouse is no longer over it
function graphSelectorOut(event)
{
	if(selectedSelector != event.target && !isLoading)
		$(event.target).removeClass('selectorHovering');
}


// Change the "Month" property of the Silverlight control according to the user's choise
function monthChanged(event)
{
	chart.Month = event.target.value;
	
	// Show the loading icon
	startLoading();
}


// Change the "Year" property of the Silverlight control according to the user's choise
function yearChanged(event)
{
	chart.Year = event.target.value;
	
	// Show the loading icon
	startLoading();
}


// Scroll the sliding panel to left
function scrollToLeft()
{
    if( ! $('#scrollLeft').hasClass("disabled") )
    {
        $('#slidingPanel').animate({left: 0}, "slow");
        $('#scrollLeft').addClass("disabled");
        $('#scrollRight').removeClass("disabled");
    }
}


// Scroll the sliding panel to right
function scrollToRight()
{
    if( ! $('#scrollRight').hasClass("disabled") )
    {
        $('#slidingPanel').animate({left: -800}, "slow");
        $('#scrollLeft').removeClass("disabled");
        $('#scrollRight').addClass("disabled");
    }
}

/**********************************/


/********* Support functions *********/

// Insert in the "graphYear" combobox an Option element for every available year
function insertAvailableYears()
{
    var currentYear = chart.Year;
    var combobox = $('#graphYear');
    
    for(var i = currentYear; i >= deploymentYear; i-- )
    {
        var opt = new Option(i,i);
        if(i == currentYear) opt.defaultSelected = true;
        
        combobox[0].add( opt, $.browser.msie ? 0 : null);
    }
}


// Preload images that aren't immediately visible 
function preloadImages()
{
    var leftArrow = new Image();
    leftArrow.src = "/stats/resources/leftArrow.png";
    
    var rightArrowDisabled = new Image();
    rightArrowDisabled.src = "/stats/resources/rightArrowDisabled.png";

    var loading = new Image();
    loading.src = "/stats/resources/loading.gif";
    
    var overlayBackground = new Image();
    overlayBackground.src = "/stats/resources/overlayBackground.png";
    
    var selectorHighlightingBgr = new Image();
    selectorHighlightingBgr.src = "/stats/resources/selectorHighlightingBgr.png";
    
    var selectorHoveringBgr = new Image();
    selectorHoveringBgr.src = "/stats/resources/selectorHoveringBgr.png";
    
    // for debugging
    //$('body').append(leftArrow);
    //$('body').append(rightArrowDisabled);
    //$('body').append(loading);
    //$('body').append(selectorHighlightingBgr);
    //$('body').append(selectorHoveringBgr);
    //$('body').append(overlayBackground);
}


// Show a loading icon and prevents any change to the graph
function startLoading()
{
    // Show the loading icon
    $('#graphLoadingOverlay').show();

    // Prevents any change to the graph
    isLoading = true;
	$('#graphMonth').attr("disabled", true);
	$('#graphYear').attr("disabled", true);
	
	// Remove the hovering effect from all selectors
	$('#graphSelectors li').removeClass('selectorHovering');
}


// Hide the loading icon and make the graph modificable again
function stopLoading()
{
    // Hide the loading icon
    $('#graphLoadingOverlay').hide();
	
	// M ake the graph modificable again
	isLoading = false;
	$('#graphMonth').attr("disabled", false);
	$('#graphYear').attr("disabled", false);
}

/*************************************/